import { createStyles } from 'antd-style';

/**
 * Upload 扩展样式 Hook
 * 
 * ⚠️ 此文件仅提供 ConfigProvider 主题系统无法实现的特殊交互效果
 * 
 * 基础样式（颜色、字体、间距、hover/active 状态等）请通过以下方式配置：
 * 1. 修改 DSL 文件 (Upload.json)
 * 2. 更新主题配置 (themes/upload.ts)
 * 3. 在应用根组件使用 ConfigProvider 应用主题
 * 
 * @example
 * ```tsx
 * const { styles } = useUploadStyles();
 * <Upload className={styles.enhancedUpload}>增强上传</Upload>
 * ```
 */
export const useUploadStyles = createStyles(({ token, css }) => {
  return {
    /**
     * 增强上传区域 - 添加圆角和过渡效果
     */
    enhancedUpload: css`
      .ant-upload-select {
        border-radius: ${token.borderRadius}px;
        transition: all 0.3s ease;
      }
      
      .ant-upload-drag {
        border-radius: ${token.borderRadiusLG}px;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: ${token.colorPrimary};
        }
      }
    `,

    /**
     * 紧凑模式 - 减少内边距
     */
    compactUpload: css`
      .ant-upload-list-item {
        padding: ${token.paddingXS}px ${token.paddingSM}px;
      }
    `,
  };
});

